<template>
  <div id="app">
    <Head title="购物车" color="#fff" bg="pink" />
    <List v-for="good in list" :key="good.id" :goodItem="good" />
    <Foot :list="list" />
  </div>
</template>

<script>
// @/ 值指代src目录
import Head from '@/views/head'
import List from './views/list'
import Foot from './views/foot'

export default {
  name: 'App',
  components: {
    Head,
    List,
    Foot
  },
  data () {
    return {
      // 购物车商品列表数据
      list: []
    }
  },
  created () {
    // 组件创建完=》发送ajax请求
    this.getCartsList()
  },
  methods: {
    // 获取购物车商品列表数据
    async getCartsList () {
      const { data } = await this.request({
        url: '/api/cart'
      })
      if (data.status === 200) {
        console.log(data.list)
        // 数据存储到data变量=》数据驱动视图
        this.list = data.list
      }
    }
  },
}
</script>

<style>
#app {
  /* 避开绝对定位的遮盖问题 */
  padding: 45px 0 50px;
}
</style>
